<template>
    <div>
        <NavTop/>
        <div style="width: 1400px;margin: auto;">
            <el-table :data="tableData" :border="parentBorder" style="width: 100%">
                <el-table-column type="expand">
                <template #default="props">
                   
                    <el-table :data="props.row.child" :border="childBorder">
                        <el-table-column label="商品编号" prop="id" />
                        <el-table-column label="商品名称" prop="name" />
                        <el-table-column label="商品数量" prop="num" />
                        <el-table-column label="商品单价" prop="onlineprice" />
                        <el-table-column label="商品金额" prop="total" />
                    </el-table>
                    
                </template>
                </el-table-column>
                <el-table-column label="订单编号" prop="orderID" />
                <el-table-column label="订单日期" prop="time" />
                <el-table-column label="商品数量" prop="num" />
                <el-table-column label="订单总金额" prop="sum" />
                <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="Type to search" />
                    </template>
                    <template #default="scope">
                        <el-button
                        size="small"
                        type="success"
                        @click="pay(scope.$index)"
                        v-if="!scope.row.isOrdered"
                        >
                        支付
                        </el-button>
                        <el-button
                        size="small"
                        type="success"
                        v-else disabled
                        >
                        已支付
                        </el-button>
                        <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index)"
                        >
                        删除
                        </el-button>
                    </template>
                    </el-table-column>
               
            </el-table>
        </div>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop.vue';
import { useGoodStore } from '@/store/goods';
import { ElMessageBox,ElMessage } from 'element-plus';



export default{
    components:{
        NavTop
    },
    data(){
        return{
        tableData:JSON.parse(sessionStorage.getItem('order')),
        store:useGoodStore()
            }
        },
    methods:{
        handleDelete(index){
                ElMessageBox.confirm(
                '确定要删除可爱的宝宝吗?',
                'Warning',
                {
                confirmButtonText: '委婉拒绝',
                cancelButtonText: '手滑了',
                type: 'warning',
                }
            )
                .then(() => {
                        this.tableData.splice(index,1)
                        sessionStorage.setItem('order',JSON.stringify(this.tableData))
                })
                .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除取消',
                })
                })
            
        },
        pay(val){
            //此处自行添加交互代码
            ElMessageBox.confirm(
                '确定要支付领养下可爱的宝宝吗?',
                'Warning',
                {
                confirmButtonText: '确定支付',
                cancelButtonText: '手滑了',
                type: 'warning',
                }
            ).then(()=>{
                 this.tableData[val].isOrdered=true
                 sessionStorage.setItem('order',JSON.stringify(this.tableData))
            })
            .catch(()=>{
                ElMessage({
                    type: 'info',
                    message: '支付取消',
                })
            })
           


        }

    }
       
    }


</script>